<template>
  <div class="top-component-config">
    <div class="title">顶部组件</div>
    <div class="component-type">
      <div>组件样式</div>
      <div class="change-component-type rect-component-area" @click="showComponentType">
        <span v-if="data.type == ''">
          <el-icon><Plus /></el-icon>
          <span>更换组件</span>
        </span>
        <span v-if="data.type == 'default'">默认组件</span>
      </div>
    </div>
    <div class="component-config" v-if="data.type !== ''">
      <div class="config-tabs">
        <span :class="{active: activeConfigTab == 'content'}" @click="changeConfigTab('content')">内容</span>
        <span :class="{active: activeConfigTab == 'style'}" @click="changeConfigTab('style')">风格</span>
        <span :class="{active: activeConfigTab == 'animate'}" @click="changeConfigTab('animate')">交互</span>
      </div>
    </div>
    <div class="config-tab-content" v-if="data.type !== '' && activeConfigTab == 'content'">
      <div class="main-nav-font-config">
        <div class="area-title">主导航文字 大小/粗细</div>
        <div class="area-content">
          <el-select size="small" v-model="data.content.mainNavFontSize">
            <el-option v-for="(item, index) in fontSizeList" :key="'mainNavFontSize' + index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="divider"></div>
          <el-select size="small" v-model="data.content.mainNavFontWeight">
            <el-option v-for="(item, index) in fontWeightList" :key="'mainNavFontWeight' + index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="area-title">次导航文字 大小/粗细</div>
        <div class="area-content">
          <el-select size="small" v-model="data.content.secondaryNavFontSize">
            <el-option v-for="(item, index) in fontSizeList" :key="'mainNavFontSize' + index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="divider"></div>
          <el-select size="small" v-model="data.content.secondaryNavFontWeight">
            <el-option v-for="(item, index) in fontWeightList" :key="'mainNavFontWeight' + index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title">主导航高度</div>
        <div class="area-content">
          <el-select size="small" v-model="data.content.mainNavHeight">
            <el-option label="55px" value="55px"></el-option>
            <el-option label="88px" value="88px"></el-option>
          </el-select>
        </div>
        <div class="area-title">次导航高/长</div>
        <div class="area-content">
          <el-select size="small" placeholder="高度" v-model="data.content.secondaryNavSize.height">
            <el-option label="55px" value="55px"></el-option>
            <el-option label="88px" value="88px"></el-option>
          </el-select>
          <div class="divider"></div>
          <el-select size="small" placeholder="宽度" v-model="data.content.secondaryNavSize.width">
            <el-option label="自适应" value="100%"></el-option>
            <!-- <el-option label="88px" value="88px"></el-option> -->
          </el-select>
        </div>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title" style="margin-bottom: 0;">主导航背景图 90*高度</div>
        <ImageUploader v-model="data.content.mainNavBackImage" style="padding: 0;  width: 100%;">
          <div
            class="area-content rect-component-area"
            :style="{
              width: '100%',
              marginRight: '20px',
              backgroundImage: `url(${data.content.mainNavBackImage})`,
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center'
            }"
          >
            <span v-if="data.content.mainNavBackImage == '' || data.content.mainNavBackImage == null"
              ><el-icon><Plus /></el-icon>添加背景图</span
            >
          </div>
        </ImageUploader>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title" style="margin-bottom: 0;">次导航背景图 50*50</div>
        <ImageUploader v-model="data.content.secondaryNavBackImage" style="padding: 0;  width: 100%;">
          <div
            class="area-content rect-component-area"
            :style="{
              width: '100%',
              marginRight: '20px',
              backgroundImage: `url(${data.content.secondaryNavBackImage})`,
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center'
            }"
          >
            <span v-if="data.content.secondaryNavBackImage == '' || data.content.secondaryNavBackImage == null"
              ><el-icon><Plus /></el-icon>添加背景图</span
            >
          </div>
        </ImageUploader>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title">LOGO 中文/英文</div>
        <div class="area-content">
          <ImageUploader v-model="data.content.logo.zh" style="padding: 0;  width: 100%;">
            <div
              class="rect-component-area"
              :style="{
              width: '100%',
              marginTop: 0,
              backgroundImage: `url(${data.content.logo.zh})`,
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center'
            }"
            >
              <span v-if="data.content.logo.zh == '' || data.content.logo.zh == null">
                <el-icon><Plus /></el-icon>添加
              </span>
            </div>
          </ImageUploader>
          <div class="divider"></div>
          <ImageUploader v-model="data.content.logo.en" style="padding: 0;  width: 100%;">
            <div
              class="rect-component-area"
              :style="{
              width: '100%',
              marginTop: 0,
              backgroundImage: `url(${data.content.logo.en})`,
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center'
            }"
            >
              <span v-if="data.content.logo.en == '' || data.content.logo.en == null">
                <el-icon><Plus /></el-icon>添加
              </span>
            </div>
          </ImageUploader>
        </div>
      </div>
    </div>
    <div class="config-tab-style" v-if="data.type !== '' && activeConfigTab == 'style'">
      <div class="main-nav-font-config" style="padding-right: 20px;">
        <el-button type="primary" style="width: 100%;" @click="resetAllColor">重置所有颜色（除主题色外）</el-button>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title">主导航文字颜色</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.mainNavFontColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.mainNavFontColor" />
          </div>
        </div>
        <div class="area-title">主导航文字颜色（鼠标经过）</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.mainNavHoverFontColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.mainNavHoverFontColor" />
          </div>
        </div>
        <div class="area-title">主导航背景颜色</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.mainNavBackColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.mainNavBackColor" />
          </div>
        </div>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title">次导航文字颜色</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.secondaryNavFontColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.secondaryNavFontColor" />
          </div>
        </div>
        <div class="area-title">次导航文字颜色（鼠标经过）</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.secondaryNavHoverFontColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.secondaryNavHoverFontColor" />
          </div>
        </div>
        <div class="area-title">次导航背景颜色</div>
        <div class="area-content">
          <div class="color-picker">
            <div class="color" :style="{background: data.style.secondaryNavBackColor}"></div>
            <input class="input" placeholder="请选择颜色" v-model="data.style.secondaryNavBackColor" />
          </div>
        </div>
      </div>
    </div>
    <div class="config-tab-animate" v-if="data.type !== '' && activeConfigTab == 'animate'">
      <div class="main-nav-font-config">
        <div class="area-title">组件形式</div>
        <div class="area-content" style="padding-right: 0;">
          <div class="behaviour-items">
            <div class="behaviour" :class="{active: data.animate.behaviour == '1'}" @click="changeBehaviour('1')">顶部悬浮且固定</div>
            <div class="behaviour" :class="{active: data.animate.behaviour == '2'}" @click="changeBehaviour('2')">顶部占位且固定</div>
            <div class="behaviour" :class="{active: data.animate.behaviour == '3'}" @click="changeBehaviour('3')">顶部悬浮且滚动</div>
            <div class="behaviour" :class="{active: data.animate.behaviour == '4'}" @click="changeBehaviour('4')">顶部占位且滚动</div>
          </div>
        </div>
      </div>
      <div class="main-nav-font-config">
        <div class="area-title">组件动画</div>
        <div class="area-content">
          <el-select size="small"></el-select>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="请选择组件类型" width="500" :before-close="handleClose">
      <div class="component-type-item" :class="{active: data.type == 'default'}" @click="chooseComponentType('default')">默认组件</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, watchEffect, watch} from 'vue';
import ImageUploader from './upload.vue';

const props = defineProps({
  data: {
    type: Object,
    default: ()=>{
      return {
        type: 'A'
      };
    }
  }
});
const dialogVisible = ref(false);
const emits = defineEmits(['configChanged']);
const activeConfigTab = ref('content');
const fontSizeList = ref([
  {
    label: '14px',
    value: '14px'
  },
  {
    label: '13px',
    value: '13px'
  },
  {
    label: '12px',
    value: '12px'
  }
]);
const fontWeightList = ref([
  {
    label: '加粗',
    value: '600'
  },
  {
    label: '常规',
    value: '500'
  },
]);
const data = ref({
  type: '',
  content: {
    mainNavFontSize: '12px', // 主导航文字大小
    mainNavFontWeight: '500',// 主导航文字粗细
    secondaryNavFontSize: '12px', // 次导航文字大小
    secondaryNavFontWeight: '500', // 次导航文字粗细
    mainNavHeight: '55px', // 主导航高度
    secondaryNavSize: {
      width: '100%', // 次导航宽度
      height: '55px' // 次导航高度
    },
    mainNavBackImage: '', // 主导航背景图
    secondaryNavBackImage: '', // 次导航背景图
    logo: {
      zh: '', // 中文Logo
      en: '' // 英文Logo
    }
  },
  style: {
    mainNavFontColor: '#FFFFFF', // 主导航字体颜色
    mainNavHoverFontColor: '#3D3D3D', // 主导航字体颜色（鼠标经过）
    mainNavBackColor: '#000000', // 主导航背景颜色
    secondaryNavFontColor: '#999999', // 次导航字体颜色
    secondaryNavHoverFontColor: '#3D3D3D', // 次导航字体颜色
    secondaryNavBackColor: '#FFFFFF', // 次导航背景颜色
  },
  animate: {
    /**
     * 1:顶部悬浮且固定
     * 2:顶部占位且固定
     * 3:顶部悬浮且滚动
     * 4:顶部占位且滚动
     */
    behaviour: '1',
    animateType: ''
  }
});

watchEffect(()=>{
  data.value = props.data;
});

watch(data, (newVal) => {
  console.log(newVal);
  emits( 'configChanged', {config: newVal});
}, {
  deep: true
});

const changeConfigTab = (e) => {
  activeConfigTab.value = e;
}

const changeBehaviour = (e) => {
  data.value.animate.behaviour = e;
}

const showComponentType = () => {
  dialogVisible.value = true;
}

const chooseComponentType = (e) => {
  data.value.type = e;
  dialogVisible.value = false;
}

const resetAllColor = () => {
  data.value.style = {
    mainNavFontColor: '#FFFFFF', // 主导航字体颜色
    mainNavHoverFontColor: '#3D3D3D', // 主导航字体颜色（鼠标经过）
    mainNavBackColor: '#000000', // 主导航背景颜色
    secondaryNavFontColor: '#999999', // 次导航字体颜色
    secondaryNavHoverFontColor: '#3D3D3D', // 次导航字体颜色
    secondaryNavBackColor: '#FFFFFF', // 次导航背景颜色
  };
}
</script>

<style lang="scss" scoped>
.top-component-config {
  .divider {
    width: 10px;
  }
  .rect-component-area {
      height: 72px;
      background: #EFEFEF;
      border-radius: 6px 6px 6px 6px;
      border: 1px dashed #A8B0BC;
      margin-top: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  .component-type-item {
    width: 115px;
    height: 32px;
    border: 1px solid transparent;
    background-color: #EFEFEF;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    cursor: pointer;
    &.active {
      border-color: #096AFF;
      color: #096AFF;
      background-color: #E6F0FF;
    }
  }
  .behaviour-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .behaviour {
      width: 115px;
      height: 32px;
      border: 1px solid transparent;
      background-color: #EFEFEF;
      border-radius: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-right: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      cursor: pointer;

      &.active {
        border-color: #096AFF;
        color: #096AFF;
        background-color: #E6F0FF;
      }
    }
  }

  .color-picker {
    width: 240px;
    height: 32px;
    border-radius: 6px;
    background-color: #EFEFEF;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;

    .color {
      width: 16px;
      height: 16px;
      background: #FFF;
      border-radius: 4px;
      margin-right: 5px;
    }

    input {
      border: none;
      background: transparent;
      outline: none;
    }
  }
  .title {
    padding: 20px;
    font-size: 14px;
    color: #3D3D3D;
    border-bottom: 1px solid #EFEFEF;
  }
  .component-type {
    padding: 20px;
    font-size: 14px;
    color: #3D3D3D;
  }
  .component-config {
    margin-left: 20px;
    border-top: 1px solid #EFEFEF;

    .config-tabs {
      padding: 20px 0;
      font-size: 14px;
      span {
        margin-right: 40px;
        color: #A8B0BC;
        cursor: pointer;

        &.active {
          color: #3D3D3D;
        }
      }
    }
  }
  .main-nav-font-config {
    margin-left: 20px;
    border-top: 1px solid #EFEFEF;
    padding: 20px 0;

    :deep(.el-upload) {
      padding: 0;
      width: 100%;
    }

    .area-title {
      font-size: 14px;
      margin-bottom: 16px;
      color: #3D3D3D;
    }
    .area-content {
      display: flex;
      flex-direction: row;
      padding-right: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
